<template>
  <div class="content-right-wrap">
    <div class="top-wrap">
      <Card>
        <div slot="title">异常处理</div>
        <div class="content-box">
          <right-top />
        </div>
      </Card>
    </div>
    <div class="bottom-wrap">
      <Card>
        <div slot="title">详情</div>
        <div class="detail-box">
          <meter-detail
            :id="id()"
            :currentMeterId="currentMeterId"
            :content="meterDetail"
            :columnNames="meterDetailColumns"
          />
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
import { nanoid } from 'nanoid'
import { createNamespacedHelpers } from 'vuex'
import RightTop from '../RightTop'
import meterDetailColumns from './meterDetailColumns'
const { mapActions, mapState } = createNamespacedHelpers('smallGas')

export default {
  name: 'small-gas-right',
  components: {
    RightTop,
    MeterDetail: () => import('@/commons/MeterDetail')
  },
  computed: {
    ...mapState(['currentMeterId', 'meterDetail']),
    id() {
      return nanoid
    },
    meterDetailColumns() {
      return meterDetailColumns
    }
  },
  methods: {
    ...mapActions([])
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';

.content-right-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .content-box {
    padding: 5px;
  }

  .top-wrap {
    flex: 1;
    margin-bottom: 10px;
    overflow: hidden;

    @{deep} .ivu-card-body {
      overflow: hidden;
    }
  }
  .info-wrap {
    padding: 0 10px;
    height: 100%;
    overflow-y: auto;
  }
  .detail-box {
    padding: 0 10px;
  }
}
</style>
